<template>
  <div style="background-color: bisque;width: calc(100% - 200px);height: calc(100VH - 100px);float: left">
    用户管理<br/>
    <table border="1">
      <tr>
        <td>ID</td>
        <td>用户名</td>
        <td>密码</td>
        <td>操作</td>
      </tr>
      <tr v-for="user in users" :key="user.id">
        <td v-text="user.id"></td>
        <td v-text="user.userName"></td>
        <td v-text="user.password"></td>
        <td>
          <router-link :to="{path:'/user/add',query:{id:user.id}}">编辑</router-link> |
          <a href="javascript:void(0);" @click="deleteById(user.id)">删除</a>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <a href="javascript:void(0);" @click="goTo(1)">首页</a>
          <a href="javascript:void(0);" @click="goTo(current>1 ? current--:current = 1)" >上一页</a>
          <a href="javascript:void(0);" @click="goTo(current<pages ? current++:pages)">下一页</a>
          <a href="javascript:void(0);" @click="goTo(pages)" >尾页</a>
        </td>
      </tr>
    </table>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "list",
  data(){
    return{
      users:[],
      current:1,
      pageSize:10,
      pages:0 //总页数
    }
  },
  methods:{
    goTo(c){
      var self = this
      this.$http.get('/user/list?current='+c+'&pageSize='+this.pageSize).then(function(res){
        self.users = res.data.list
        self.pages = res.data.pages
        self.current = res.data.current
      })
    },
    deleteById(id){
      var self = this
      this.$http({
        url: '/user/deleteById',
        method: 'post',
        params:{'id':id}
      })
          .then(function (res) {
            console.log(res)
            if(res.data){
              self.$router.go(0) //刷新当前页面
            }else{
              alert('删除失败')
            }
          })
    }
  },
  created() {
    var self = this
    this.$http.get('/user/list?current='+this.current+'&pageSize='+this.pageSize).then(function(res){
      self.users = res.data.list
      self.pages = res.data.pages
      self.current = res.data.current
    })
  }
}
</script>

<style scoped>

</style>